/**
 * 首页组件
 * 该组件负责渲染网站首页，包括页面的布局和各个子组件的渲染。
 * 使用了Redux进行状态管理，并通过自定义hook来处理页面滚动事件。
 * 
 * @returns 返回一个React元素。
 */
import style from "./Index.module.scss";
import BannerWave from "@/components/BannerWave/BannerWave";
import { useAppDispatch } from "@/hooks/useReduxHook";
import { getWebCount, getWebInfo } from "@/store/webInfoSlice";
import { useEffect } from "react";
import BannerImage from "./BannerImage/BannerImage";
import TitleRegion from "./TitleRegion/TitleRegion";
import NoticeBox from "./NoticeBox/NoticeBox";
import UserInfo from "./UserInfo/UserInfo";
import HotArticleWall from "./HotArticleWall/HotArticleWall";
import { usePageScroll } from "@/hooks/usePageScroll";
import ArticleList from "./ArticleList/ArticleList";
import RewordWall from "./RewordWall/RewordWall";
export default function Index(): React.ReactElement {
  const dispactch = useAppDispatch(); // 使用Redux的dispatch函数
  
  // 使用Effect钩子来在组件挂载时获取网站信息和访问计数
  useEffect(() => {
    dispactch(getWebInfo());
    dispactch(getWebCount());
  }, [dispactch]);
  
  // 使用自定义hook来处理页面滚动
  const { pageContainerRef, snapNext } = usePageScroll();

  return (
    <div className={style["lx-index__page"]}>
      <BannerImage /> {/* 顶部横幅图片 */}
      <div className={`${style["first-screen"]} flex flex--b`}>
        <TitleRegion /> {/* 标题区域 */}
        <BannerWave snapNext={snapNext} /> {/* 波浪动画，与滚动事件关联 */}
      </div>
      <div
        className={`${style["page__container"]} flex`}
        ref={pageContainerRef}
      >
        <div className={style["side__content"]}>
          <UserInfo /> {/* 用户信息 */}
          <HotArticleWall /> {/* 热门文章墙 */}
          <RewordWall /> {/* 获奖墙 */}
        </div>
        <div className={style["right__content"]}>
          <NoticeBox /> {/* 公告盒子 */}
          <ArticleList /> {/* 文章列表 */}
        </div>
      </div>
    </div>
  );
}